import React, { Component } from 'react';
import { Block } from '_platform/components4max/Block';
import { BarChart } from '_platform/components4max/Charts/Bar';
import { Icon,notification } from 'antd';
const echarts = require('echarts');


export default class Chart1 extends Component {
    constructor() {
        super();
        this.state = {
            xdata : ['项目1', '项目2', '项目3', '项目4', '项目5', '项目6', '项目7', '项目8'],
            seriesdata1: ['45', '123', '65', '145', '54', '145', '56', '54'],
            seriesdata2: ['123', '44', '124', '34', '23', '123', '23', '15'],
        }
    }
    componentWillMount(){
        let {xdata,seriesdata1,seriesdata2} = this.state;
        let next = 9;
        setInterval(()=>{
            xdata.shift();
            xdata.push('项目'+(next++)%99);
            seriesdata1.shift();
            seriesdata1.push(Math.round(Math.random()*150)+50);
            seriesdata2.shift();
            seriesdata2.push(Math.round(Math.random()*150)+50);
            this.setState({xdata,seriesdata1,seriesdata2});
        },2100);
    }
    
    render() {
        return (
                <BarChart style={{ width: '100%', height: '100%' }}
                    option={{
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow',
                            }
                        },
                        grid: {
                            top: '25px',
                            bottom: '20px'
                        },
                        xAxis: {
                            triggerEvent: true,
                            data: this.state.xdata,
                            axisLabel: {
                                interval: 0,
                                show: true,
                                textStyle: {
                                    color: "#B4B5BE"
                                }
                            },
                            axisLine: {
                                lineStyle: {
                                    show: false,
                                    color: "#F3F3F3",
                                    width: 1
                                }
                            },
                            axisTick: {
                                alignWithLabel: true
                            }
                        },
                        yAxis: [{
                            name: '',
                            type: 'value',
                            nameTextStyle: {
                                "color": "#AEA4A8"
                            },
                            axisLabel: {
                                interval: 0,
                                show: true,
                                textStyle: {
                                    color: "#B4B5BE"
                                }
                            },
                            axisLine: {
                                lineStyle: {
                                    color: "#F3F3F3",
                                    width: 1
                                }
                            },
                            splitLine: {
                                lineStyle: {
                                    color: "#F3F3F3",
                                    width: 1
                                }
                            }
                        },
                        {
                            nameTextStyle: {
                                "color": "#AEA4A8"
                            },
                            axisLabel: {
                                interval: 0,
                                show: false,
                                textStyle: {
                                    color: "#B4B5BE"
                                }
                            },
                            axisLine: {
                                lineStyle: {
                                    color: "#F3F3F3",
                                    width: 1
                                }
                            },
                            splitLine: {
                                show: false,
                                lineStyle: {
                                    color: "#F3F3F3",
                                    width: 1
                                }
                            }
        
                        }
                        ],
                        series: [{
                            name: '',
                            type: 'bar',
                            silent: true,
                            itemStyle: {
                                normal: {
                                    color: '#1C9BFF'
                                }
                            },
                            data: this.state.seriesdata1,
                            barWidth: 10
                        }, {
                            name: '',
                            type: 'bar',
                            silent: true,
                            itemStyle: {
                                normal: {
                                    color: '#CEFDAB'
                                }
                            },
                            data: this.state.seriesdata2,
                            barWidth: 10
                        }]
                    }}
                />
        )
    }
}
